<template>
    <a-menu
        v-model:collapsed="collapsed"
        :selected-keys="selectedKey"
        accordion
        auto-open-selected
        show-collapse-button
        :level-indent="34"
        :onCollapse="setCollapse"
    >
        <a-sub-menu v-for="element in menuTree" :key="element.name">
            <template #icon>
                <component :is="element?.meta?.icon"></component>
            </template>
            <template #title>{{ element?.meta?.locale || '' }}</template>
            <a-menu-item
                v-for="elem in element?.children"
                :key="elem.name"
                @click="goto(elem)"
            >
                {{ elem?.meta?.locale || '' }}
            </a-menu-item>
        </a-sub-menu>
    </a-menu>
</template>

<script>
import { defineComponent, ref, watch, computed, createVNode } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useAppStore } from '@/store';
import usePermission from '@/hooks/permission';

export default defineComponent({
    emit: ['collapse'],
    setup() {
        const appStore = useAppStore();
        const permission = usePermission();
        const router = useRouter();
        const route = useRoute();
        const collapsed = ref(false);
        const appRoute = computed(() => {
            return router.getRoutes().find((el) => el.name === 'root');
        });
        const menuTree = computed(() => {
            const copyRouter = JSON.parse(
                JSON.stringify(appRoute.value.children)
            );
            console.log('copyRouter', copyRouter);
            function travel(_routes, layer) {
                if (!_routes) return null;
                const collector = _routes.map((element) => {
                    // no access
                    if (!permission.accessRouter(element)) {
                        return null;
                    }

                    // leaf node
                    if (!element.children) {
                        return element;
                    }

                    // Associated child node
                    const subItem = travel(element.children, layer);
                    if (subItem.length) {
                        element.children = subItem;
                        return element;
                    }
                    // the else logic
                    if (layer > 1) {
                        element.children = subItem;
                        return element;
                    }
                    return null;
                });
                return collector.filter(Boolean);
            }
            return travel(copyRouter, 0);
        });

        // In this case only two levels of menus are available
        // You can expand as needed

        const selectedKey = ref([]);
        const goto = (item) => {
            router.push({
                name: item.name,
            });
        };
        watch(
            route,
            (newVal) => {
                if (newVal.meta.requiresAuth) {
                    const key = newVal.matched[2]?.name;
                    selectedKey.value = [key];
                }
            },
            {
                immediate: true,
            }
        );
        watch(
            () => appStore.menuCollapse,
            (newVal) => {
                collapsed.value = newVal;
            },
            {
                immediate: true,
            }
        );
        const setCollapse = (val) => {
            appStore.updateSettings({ menuCollapse: val });
        };

        return {
            goto,
            menuTree,
            collapsed,
            selectedKey,
            setCollapse,
        };
    },
});
</script>

<style lang="less" scoped>
.arco-menu {
    height: 100%;
}

:deep(.arco-menu-inner) {
    .arco-menu-inline-header {
        display: flex;
        align-items: center;
        user-select: none;
    }

    .arco-menu-item {
        user-select: none;
    }

    .arco-icon {
        &:not(.arco-icon-down) {
            font-size: 18px;
        }
    }

    .arco-menu-pop-header {
        &:not(.arco-menu-has-icon) {
            height: 40px;
            white-space: normal;
            text-overflow: clip;
        }
    }
}
</style>
